import { useElementSize } from "@/features/useElementSize"
import styled from "@emotion/styled"
import { useAtom } from "jotai"
import { useEffect } from "react"
import { useNavigate } from "react-router-dom"
import { homeGamesAtom } from "@/features/business/HomePage_deprecated/atoms_deprecated"
import { CategoryGameSearch } from "../components/CategoryGameSearch"
import { CategoryGameSelect } from "../components/CategoryGameSelect"
import { GameCardItem } from "../components/GameCardItem"
import { GridGameList } from "../components/GridGameList"
import { useSubPage } from "../hooks/useSubPage"
import { RefGameListItem } from "@/apis/home_page_constant_types"

const SubContainer = styled.section`
    padding-top: 12rem;
    flex: 1;
    display: flex;
    flex-direction: column;
`

const ListContainer = styled.div`
    flex: 1;
`

export const SubPage = () => {
    const {
        categoryId,
        keyword,
        sort,
        brands,
        ary,
        isLoading,
        hasMore,
        providerList,
        onLoadMore,
        setAction,
        setKeyword,
    } = useSubPage()
    const { elementRef, size } = useElementSize<HTMLDivElement>()

    const [{ links }] = useAtom(homeGamesAtom)

    const navigate = useNavigate()

    /**
     * 该页面是导航进入的, 读取的后台配置, 如果后台关闭了, 需要退出该页面
     */

    useEffect(() => {
        const keys = Object.keys(links).map((it) => it.toLowerCase())
        if (keys.length && !keys.includes(categoryId.toLowerCase())) {
            navigate("/", { replace: true })
        }
    }, [categoryId, links, navigate])

    return (
        <>
            <SubContainer>
                <CategoryGameSearch
                    val={keyword || ""}
                    setVal={(_val: string) => {
                        setKeyword(_val)
                    }}
                />
                <CategoryGameSelect
                    sort={sort || ""}
                    setSort={(_sort: string) => {
                        setAction("sort", _sort)
                    }}
                    brands={brands ? brands.split(",") : []}
                    setBrands={(_sort: string[]) => {
                        setAction("brands", _sort.join(","))
                    }}
                    gameProviderList={providerList}
                    setGameClassify={(_type: string[]) => {
                        navigate(`/s-game/provider/${_type.join(",")}`, {
                            replace: true,
                        })
                    }}
                />
                <ListContainer ref={elementRef}>
                    <GridGameList<RefGameListItem>
                        // 添加key解决 categoryId brands keyword 等 变化时, 该列表没有重新渲染的问题
                        key={`${categoryId}_${brands}_${keyword}_${sort}_grid_list`}
                        height={size?.height || 0}
                        list={ary}
                        isLoading={isLoading}
                        itemContent={(index, game) => {
                            return (
                                <GameCardItem
                                    {...game}
                                    key={`sub_game_item__${index}`}
                                />
                            )
                        }}
                        onLoadMore={() => {
                            if (hasMore && !isLoading) {
                                onLoadMore()
                            }
                        }}
                    />
                </ListContainer>
            </SubContainer>
        </>
    )
}
